<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" :default-time="['12:00:00']"
                          style="width:350px;" v-model="taskTime" type="datetimerange" size="small" range-separator="——"
                          start-placeholder="开始时间" end-placeholder="结束时间" class="mRight10" clearable>
          </el-date-picker>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="evaluate-top">
        <div class="evaluate-top-middle">
          <CardContainer headerName="部门养护统计">
            <template slot="card-content">
              <div class='chart2' id='chart2'></div>
            </template>
          </CardContainer>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CardContainer from "@/views/healthMonitor/components/CardContainer";
  import echarts from "echarts";
  export default {
    mounted() {
      this.Chart2 ()
    },
    methods: {
      Chart2 () {
        this.chart2 = new echarts.init(document.getElementById('chart2'))
        let bridgeData=['四科新纪元1组','四科新纪元2组','四科新纪元3组','四科新纪元4组','四科新纪元5组','四科新纪元6组']
        let xData = function() {
          let data = [];
          for (let i = 0; i < bridgeData.length; i++) {
            data.push(bridgeData[i]);
          }
          return data;
        }();
        this.chart2.setOption({

          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              textStyle: {
                color: "#fff"
              }

            },
          },
          "grid": {
            "borderWidth": 0,
            "top": 110,
            "bottom": 95,
            textStyle: {
              color: "#fff"
            }
          },
          "legend": {
            x: '4%',
            top: '16%',
            left: '72%',
            textStyle: {
              color: '#90979c',
            },
            "data": ['养护数', '未养护数']
          },


          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": xData,
          }],
          "yAxis": [{
            "type": "value",
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          }],
          "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
              0
            ],
            bottom: 30,
            "start": 10,
            "end": 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",

            },
            textStyle:{
              color:"#fff"},
            borderColor:"#90979c"


          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
          }],
          "series": [
            {
              "name": "养护数",
              "type": "bar",
              "stack": "总量",
              "barMaxWidth": 35,
              "barGap": "10%",
              "itemStyle": {
                "normal": {
                  "color": "rgba(255,144,128,1)",
                  "label": {
                    "show": true,
                    "textStyle": {
                      "color": "#fff"
                    },
                    "position": "inside",
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                39,
                47,
                55,
                61,
                79,
                43,
                44,
                32,
                28,
                33,

              ],
            },

            {
              "name": "未养护数",
              "type": "bar",
              "stack": "总量",
              "itemStyle": {
                "normal": {
                  "color": "rgba(0,191,183,1)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "inside",
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                23,
                14,
                52,
                32,
                18,
                4,
                24,
                23,
                11,
                41,
              ]
            },
          ]
        });
      },
    },
    components: {
      CardContainer,
    },
  }
</script>
<style scoped lang="scss">
  @import '../../inspection/insp.scss';
  .insp-content{
    width: 100%;
    height: 100%;

    .evaluate-top{
      width: 100%;
      height: 500px;
      .evaluate-top-middle{
        width: 80%;
        height: 500px;
        .chart2 {
          width: 80%;
          height: 800px;
          background-size: 80% 80%;
          margin-top: -8%;
          margin-left: 25%;
        }
      }
    }
  }


</style>
